<template>
  <!-- 图片视频资料 -->
    <div class="img_list_box">
      <div class="img_list">
        <el-carousel height="450px">
          <el-carousel-item v-for="item in imgList" :key="item">
            <img :src="item+'?x-oss-process=image/resize,m_fill,w_672,h_450,limit_0'" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="video_list">
        <video controls class="video" :src="videoList[0]"></video>
      </div>
    </div>
</template>

<script>
export default {
  name:'ImgInfo',
  props:{
    type:{
      type:Array,
      default:()=>[]
    }
  },
  computed:{
    imgList(){
      return this.type.filter(i=>i.substr(-3)!=='mp4')
    },
    videoList(){
      return this.type.filter(i=>i.substr(-3)==='mp4')
    }
  }
}
</script>

<style>
.img_list_box{
  width: 100%;
  height: 100%;
}
.img_list{
  width: 50%;
  float: left;
}
.video_list{
  width: 50%;
  height: 100%;
  float: right;
}
.video{
  width: 100%;
  height: 100%;
}
</style>
